<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in shopcartList.rows" :key="item._id">
          <td>
            {{item._id }}
          </td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.num--">-</button>
            {{ item.num }}
            <button @click="item.num++">+</button>
          </td>
          <td>{{ (item.num*item.price).toFixed() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<!-- 
  关于直接赋值给reactive响应式失效的问题
  1、原因：proxy的响应式是存在与其属性
  2、解决办法
  1) 在reactive定义属性，然后将后端返回过来的结果赋值给reactive的属性，不要直接更改reactive的值
  2) 直接使用ref
 -->
<script lang='ts' setup>
  import {reactive} from 'vue'
  import axios from 'axios'
  interface ShopcartItemType{
    _id:string
    name:string
    num:number
    price:number
    checked?:boolean
  }
  //定义初始化数据
  let shopcartList=reactive<{rows:Array<ShopcartItemType>}>({
    rows:[]
  })
  //向后端发送请求
  axios.get('http://www.zhaijizhe.cn:3003/shopcart/getShopcartData').then(res=>{ 
    shopcartList.rows=res.data.data
  })

</script>

<style lang='scss' scoped>
</style>